<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5%;">
    <legend>修改密码</legend>
</fieldset>
<div class="layui-form-item">
    <div class="layui-inline" >
        <form class="layui-form"  lay-filter="example"  >
            <input type="text" id="id" name="id" style="display: none" class="layui-input">
            <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="oldPassword" name="oldPassword" lay-verify="checkPassword"   placeholder="原始密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="newPassword" id="newPassword" lay-verify="required|checkNewPwd"  placeholder="新密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">请在此确认新密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="newPassword1" id="renewPassword" lay-verify="required|checkNewPwd" placeholder="请在此确认新密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="userForm">保存修改</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script  src="../../../layui/layui.js" ></script>
<script src="../../../layui/layui.all.js"  ></script>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/common.js"></script>
<script>

    var userId = getUrlParam("userId");
    layui.use(['table','upload','element'], function() {
        var form = layui.form;
        var $ = layui.jquery,layer = layui.layer;
        form.val('example', {
            "id":userId// "name": "value"
        });
        //自定义验证规则
        form.verify({
            //验证密码是否正确
            checkPassword: function(value){
                var checkData = {
                    userId: userId,
                    oldPassword: value
                };

                var message = '';
                $.ajax({
                    type:"post",
                    url:"/sysUser/checkPassword",
                    async: false, //改为同步请求
                    data:checkData,
                    success:function(res){
                        if(res.code == 404){
                            //返回true表示验证通过 用!来表示返回false时
                            message ="当前密码不正确，请重新输入！";
                        }
                    }
                });
                //需要注意  需要将返回信息写在ajax方法外
                if (message)
                    return message;

            },
            checkNewPwd: function (value) {
                if($("#newPassword").val() != $("#renewPassword").val()) {
                    return "新密码与确认密码不一致";
                }
            }
        });
          //监听提交
             form.on('submit(userForm)', function(data){
                 var uploadData = {
                     userId:userId,
                     userPassword: data.field['newPassword']
                 };
                 $.ajax({
                     url:"/sysUser/updatePassword",
                     method:"post",
                     data : uploadData,
                     success:function(data) {
                         layer.msg(data.msg);
                         setTimeout(function(){
                             layer.close(layer.index);
                             window.parent.location.reload();
                         },1800 );
                     }

                 });
             });
         })

</script>
</body>
</html>